<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import { quadratDetails } from '@/utils/api.js'
import { Back, FullScreen, Search, Document } from '@element-plus/icons-vue'
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus'
import close from '@/assets/icon/close.svg'
const router = useRouter();
const { currentRoute } = useRouter();
import moment from 'moment'
const $moment = moment

import x1 from '@/assets/img/x1.png'
import x2 from '@/assets/img/x2.png'
import x3 from '@/assets/img/x3.png'
import x4 from '@/assets/img/x4.png'
import x5 from '@/assets/img/x5.png'
import x6 from '@/assets/img/x6.png'

const islps = ref(false)
const lps = ref({})
const lpls = ref([])
const isqdss = ref(false)
const qddlis = ref([]);
const qddtt = ref('');
const qddid = ref('');
const qdfs = reactive([
    {
        id: 'jsdfhjf91',
        img: x4,
        name: "样方名称",
        value: ["土湾大样地"]
    },
    {
        id: 'jsdfhjf91',
        img: x2,
        name: "样方编号",
        value: ["SMT2015006"]
    },
    {
        id: 'jsdfhjf91',
        img: x3,
        name: "样方宽(m)",
        value: ["50"]
    },
    {
        id: 'jsdfhjf91',
        img: x5,
        name: "样方长(m)",
        value: ["50"]
    },
    {
        id: 'jsdfhjf91',
        img: x1,
        name: "调查人",
        value: ["张三", '李四', '王五']
    }
])



const scls = ref('')
const mediaList = ref([])
const chartList = ref([])
const startXj = ref('')
const endXj = ref('')
const startHeight = ref('')
const endHeight = ref('')
const plantName = ref('')
const goback = () => {
    router.go(-1)
};

const getqdss = async (item) => {
    let params = {
        "id": qddid.value, //样方id
        "startXj": startXj.value, //开始胸径
        "endXj": endXj.value, //结束胸径
        "startHeight": startHeight.value, //开始高度
        "endHeight": endHeight.value, //结束高度
        "plantName": plantName.value
    }

    let res = await quadratDetails(params)
    if (res.code == '200') {
        isqdss.value = true;
        qddlis.value = res.data.botanyList;
        qddtt.value = `${res.data.yfName} (${res.data.size})`;
        setTimeout(function () {
            drawsd('qdssls', res.data.botanyList, `${res.data.yfName} (${res.data.size})`, res.data.yfLength, res.data.yfWidth)
        }, 500)

    }

}

const getquadratDetails = async () => {
    let params = {
        "id": currentRoute.value.query.id, //样方id
        "startXj": '', //开始胸径
        "endXj": '', //结束胸径
        "startHeight": '', //开始高度
        "endHeight": '', //结束高度
        "plantName": ""
    }

    let res = await quadratDetails(params)

    if (res.code == '200') {
        let qqs = res.data;
        qdfs[0].value = [qqs.yfName];
        qdfs[1].value = [qqs.yfNum];
        qdfs[2].value = [qqs.yfWidth];
        qdfs[3].value = [qqs.yfLength];
        qdfs[4].value = [qqs.surveyNames];

        let arr = []
        qqs.mediaList.forEach(e => {
            arr.push(e.imageUrl)
        });
        mediaList.value = arr

        if (res.data.quadratSurveyList.length == 1) {
            scls.value = 'singlec'
        } else if (res.data.quadratSurveyList.length == 2) {
            scls.value = 'singlet'

        } else if (res.data.quadratSurveyList.length == 3) {
            scls.value = 'singles'
        } else {
            scls.value = 'singlem'
        }

        chartList.value = res.data.quadratSurveyList


        setTimeout(function () {
            res.data.quadratSurveyList.forEach((e, x) => {

                let cht = []
                if (e.botanyList) {
                    // e.botanyList.forEach(ss => {
                    //     cht.push([ss.x, ss.y, ss.plantXj])
                    // })

                    drawsd(`charts${x}`, e.botanyList, `${e.yfName} (${e.size})`, e.yfLength, e.yfWidth)
                }
            })
        }, 500)



    }
}


const drawsd = (demo, data, title, mx, my) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChartline = echarts.init(document.getElementById(demo));

    let xy = data.map(function (x, idx) {
        return [x.x, x.y, x.plantName, x.number, x.plantHeight, x.plantXj];
    });

    let option = {
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: title,
            top: 10,
            left: 10
        },
        xAxis: {
            max: mx
        },
        yAxis: {
            max: my
        },
        tooltip: {
            formatter: function (param) {
                let value = param.value;
                // prettier-ignore
                return '<div style="font-size: 16px;padding-bottom: 7px;margin-bottom: 7px">'
                    + '植物编号：' + value[3] + '<br>'
                    + '植物名称：' + value[2] + '<br>'
                    + '胸径：' + value[5] + 'cm' + '<br>'
                    + '树高：' + value[4] + 'm ' + '<br>'
                    + '</div>'
            }
        },
        series: [
            {
                name: '样方分布',
                data: xy,
                type: 'scatter',
                symbolSize: function (data) {
                    return data[5];
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    color: new echarts.graphic.RadialGradient(0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(59, 161, 245, 1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(72, 127, 237, 1)'
                        }
                    ])
                }
            },

        ]
    };
    myChartline.setOption(option);
    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChartline.resize();
    });
}


const look_plant = (item) => {
    let arr = [];
    item.mediaList.forEach(e => {
        if (e.type == 'image') {
            arr.push(e.imageUrl)
        }
    })

    lpls.value = arr;
    lps.value = item;
    islps.value = true;
}

onMounted(() => {
    getquadratDetails()

})

defineExpose({
    $moment
})

onBeforeRouteLeave((to, from, next) => {
    let oldPath = to.path;
    let newPath = from.path;
    if (oldPath != '/history/quadratSurvey') {
        window.sessionStorage.removeItem('hisanimal');
    }
    next()
});
</script>
<template>
    <div>
        <div class="ha-title addt">
            <div>样方调查详情</div>
            <el-button @click.stop="goback" size="large" :icon="Back">返回</el-button>
        </div>

        <div style="height: 24px;"></div>

        <el-row :gutter="10">
            <el-col :span="8">
                <div class="qzTitle">
                    <div></div>
                    <div><span>基本信息</span></div>
                </div>
            </el-col>

            <el-col :span="13"></el-col>
            <el-col :span="3">

            </el-col>
        </el-row>
        <div style="height: 24px;"></div>

        <div class="qsd-f">
            <div v-for="(item, index) in qdfs" :key="item.id">
                <div class="qsd-f-1">
                    <img :src="item.img" alt="">
                </div>
                <div class="qsd-f-2">
                    <div>{{ item.name }}</div>
                    <div>{{ item.value.join('、') }}</div>
                </div>
            </div>
            <div>
                <div class="qsd-f-1">
                    <img :src="x6" alt="">
                </div>
                <div class="qsd-f-2s">
                    <el-image v-if="mediaList.length > 0" :src="mediaList[0]" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="mediaList" :initial-index="0" fit="cover" />
                </div>
            </div>
        </div>

        <div style="height: 24px;"></div>
        <div class="qzTitle">
            <div></div>
            <div><span>样方信息</span></div>
        </div>
        <div style="height: 24px;"></div>
        <div class="chartsb scol">
            <div :class="scls" v-for="(item, index) in chartList" :key="item.id">
                <div @click.stop=" qddid = item.id; getqdss()"
                    style="position: absolute;top: 8px;right: 8px;z-index: 9;font-size: 18px;cursor: pointer;">
                    <el-icon>
                        <FullScreen />
                    </el-icon>
                </div>
                <div style="width: 100%;height: 100%;" :id="`charts${index}`">

                </div>
            </div>
        </div>


        <div class="ha-form" v-if="isqdss">
            <div class="hf-box">
                <div class="hf-close" @click.stop="isqdss = false">
                    <img :src="close" alt="">
                </div>
                <div style="height: 10px;"></div>
                <el-row :gutter="10">
                    <el-col :span="4" style="display: flex; align-items: center;">
                        <div class="qzTitle">
                            <div></div>
                            <div><span>{{ qddtt }}</span></div>
                        </div>
                    </el-col>

                    <el-col :span="7" style="display: flex; align-items: center;">
                        <span>胸径范围(cm)：</span>
                        <el-input v-model="startXj" style="width: 100px" type="number" size="large"
                            placeholder="最小胸径" />
                        <span style="margin: 0 8px;">~</span>
                        <el-input v-model="endXj" style="width: 100px" type="number" size="large" placeholder="最大胸径" />
                    </el-col>
                    <el-col :span="7" style="display: flex; align-items: center;">
                        <span>树高范围(m)：</span>
                        <el-input v-model="startHeight" style="width: 100px" type="number" size="large"
                            placeholder="最小树高" />
                        <span style="margin: 0 8px;">~</span>
                        <el-input v-model="endHeight" style="width: 100px" type="number" size="large"
                            placeholder="最大树高" />
                    </el-col>
                    <el-col :span="3" style="display: flex; align-items: center;">
                        <el-input v-model="plantName" style="width: 100%" size="large" placeholder="请输入植物名称" />
                    </el-col>

                    <el-col :span="3" style="display: flex; align-items: center;justify-content: flex-end;">
                        <el-button @click.stop="getqdss" size="large" type="info" plain :icon="Search">搜索</el-button>
                    </el-col>

                </el-row>
                <div style="height: 16px;"></div>
                <div class="qdds">
                    <div>
                        <el-table :data="qddlis" style="width: 100%;margin-top: 16px;height: calc(100% - 140px);"
                            :row-style="{ height: '50px' }"
                            :header-cell-style="{ 'color': '#333', 'line-height': '40px' }">

                            <el-table-column label="植物名称" prop="plantName" />
                            <el-table-column label="编号 " prop="plantNumber" />


                            <el-table-column label="操作" fixed="right">
                                <template #default="scope">
                                    <el-button @click.stop="look_plant(scope.row)" type="info" :icon="Document" plain
                                        size="small">
                                        查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div id="qdssls"></div>
                </div>

            </div>
        </div>


        <div class="ha-form" v-if="islps">
            <div class="hf-box" style="width: 900px;height: 590px;">
                <div class="hf-close" @click.stop="islps = false">
                    <img :src="close" alt="">
                </div>

                <div class="qzTitle">
                    <div></div>
                    <div><span>植物详情</span></div>
                </div>
                <div style="height: 16px;"></div>
                <div class="plant_details">
                    <div>
                        <el-image :preview-teleported="true" style="width: 100%;height: 100%;" :src="lpls[0]"
                            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="lpls" :initial-index="0"
                            fit="cover" />

                        <div class="xjsnsbn">
                            <span>{{ lpls.length }}</span>
                        </div>
                    </div>
                    <div class="scol">
                        <div class="plant-details-t">
                            <div><span>植物名称</span></div>
                            <div><span>{{ lps.plantName }}</span></div>
                        </div>
                        <div class="plant-details-t">
                            <div><span>胸径(cm)</span></div>
                            <div><span>{{ lps.plantXj }}</span></div>
                        </div>
                        <div class="plant-details-t">
                            <div><span>冠幅(m)</span></div>
                            <div><span>{{ lps.guanfu }}</span></div>
                        </div>
                        <div class="plant-details-t">
                            <div><span>树高(m)</span></div>
                            <div><span>{{ lps.plantHeight }}</span></div>
                        </div>
                        <div class="plant-details-t">
                            <div><span>健康状态</span></div>
                            <div><span>{{ (lps.jiankangzhuangtai == '' || !lps.jiankangzhuangtai) ? '--' :
                                lps.jiankangzhuangtai
                                    }}</span></div>
                        </div>
                        <div class="plant-details-t">
                            <div><span>X(m)</span></div>
                            <div><span>{{ lps.x }}</span></div>
                        </div>
                        <div class="plant-details-t">
                            <div><span>Y(m)</span></div>
                            <div><span>{{ lps.y }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<style scoped>
.qsd-f {
    width: 100%;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qsd-f>div {
    height: 100%;
    width: calc((100% - 120px) / 6);
    padding: 16px;
    display: flex;
    border-radius: 16px;
    background: rgba(245, 247, 250, 1);
    overflow: hidden;
}

.qsd-f>div>div {
    height: 100%;
}

.qsd-f-1 {
    width: 50px;
    height: 50px;
}

.qsd-f-1 img {
    width: 100%;
    height: 100%;
}

.qsd-f-2 {
    width: calc(100% - 50px);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
}

.qsd-f-2s {
    width: calc(100% - 50px);
    display: flex;
    align-items: center;
}


.qsd-f-2s>div {
    width: 50px;
    height: 50px;
    margin-left: 16px;
    border-radius: 8px;
}

.qsd-f-2>div {
    width: 100%;
}

.qsd-f-2>div:nth-child(1) {
    color: #606266;
    font-weight: 700;
}

.qsd-f-2>div:nth-child(2) {
    color: #333333;
    line-height: 2;
    /* font-size: 18px; */
    /* font-weight: 700; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qsd-f-2 img {
    width: 50px;
    height: 50px;
    margin-left: 4px;
    border-radius: 4px;
}

.chartsb {
    width: 100%;
    padding: 8px;
    height: calc(100% - 300px);
    /* background-color: aqua; */
}

.chartsb>div {
    position: relative;
}

.singlec {
    width: 100%;
    height: 100%;
}

.singlet {
    width: calc((100% - 24px) /2);
    margin-right: 24px;
    height: 100%;
    float: left;
    box-shadow: 0px 0px 8px rgba(220, 223, 230, 0.6);
}

.singlet:nth-child(2n) {
    margin-right: 0;
}

.singles {
    width: calc((100% - 48px) /3);
    height: 100%;
    margin-right: 24px;
    float: left;
    box-shadow: 0px 0px 8px rgba(220, 223, 230, 0.6);
}

.singles:nth-child(3n) {
    margin-right: 0;
}

.singlem {
    width: calc((100% - 72px) /4);
    height: 400px;
    float: left;
    margin-bottom: 24px;
    box-shadow: 0px 0px 8px rgba(220, 223, 230, 0.6);
}

.singlem:nth-child(4n) {
    margin-right: 0;
}

.ha-form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, .5);
}

.hf-box {
    width: 1400px;
    height: 800px;
    position: relative;
    padding: 24px;
    border-radius: 4px;
    background: #FFF;
    cursor: pointer;
}

.hf-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.qdds {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
}


.qdds>div {
    height: 100%;
}

.qdds>div:nth-child(1) {
    width: 400px;
    padding-right: 24px;
}

.qdds>div:nth-child(2) {
    width: calc(100% - 400px);
}

.plant_details {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
}

.plant_details>div {
    flex: 1;
    height: 100%;
}

.plant_details>div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(245, 247, 250, 1);
    position: relative;
}

.plant_details>div:nth-child(2) {
    padding-left: 24px;
}

.plant-details-t {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
}

.plant-details-t>div:nth-child(1) {
    width: 120px;
    height: 30px;
    color: #606266;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(245, 247, 250, 1);
}

.plant-details-t>div:nth-child(2) {
    height: 100%;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.xjsnsbn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    border-radius: 4px;
    padding: 5px 10px;
    background-color: rgba(245, 247, 250, 1);
    overflow: hidden;
}
</style>